<script setup lang="ts">
import CategoryList from './_components/category.vue'
import SuggestList from './_components/suggest.vue'
import SuppierList from './_components/suppier.vue'
const { cateProviderData } = storeToRefs(useCasinoStore())

const route = useRoute()
const { VITE_CASINO_GAME_PAGE_SIZE } = getEnv()
const searchKeyword = ref('')
const currentType = ref('category')
const sortType = ref(EnumCasinoSortType.hot)
const pids = ref('') //供应商
const cid = ref(route.query.cid?.toString() ?? '0')
const ty = ref<string>(route.query?.ty?.toString() ?? '')
const gameTypeReal = ref(route.query.game_type?.toString() ?? '')

const isRec = computed(() => currentType.value === 'rec') // 推荐游戏
const isProvider = computed(() => currentType.value === 'provider') // 供应商
const isCat = computed(() => currentType.value === 'category') // 类别

const params = computed(() => {
    return getTy({ cid: cid.value, game_type: cid.value === '100' ? gameTypeReal.value : undefined, ty: ty.value })
})
const paramsCate = computed(() => getTy({
    w: searchKeyword.value,
    cid: cid.value,
    sort: sortType.value,
    venue_id: pids.value,
    game_type: cid.value === '100' ? gameTypeReal.value : undefined,
    ty: ty.value,
}))
// 类别游戏
const platformOptions = computed(() => {
    if (catGameData.value && catGameData.value.sums) {
        return catGameData.value.sums.map((a) => {
            const provider = flatten(cateProviderData.value.venue.h5)
            return provider.find((item: any) => item.id === a.platform_id)
            /* {
                label: a.platform_name,
                value: a.platform_id,
                count: a.total,
                isChecked: false,
            } */
        })
    }
    return []
})
const isSearchMode = computed(() => searchKeyword.value.trim().length > 0 || pids.value.length > 0)
// 类别场馆列表----主要供应商下拉数据
const {
    data: catGameData,
    run: runGameCate,
} = useRequest(ApiMemberGameCate, {
    onSuccess: () => {
        // scrollToTop()
        onSearch('')
    },
})
// 搜索数据
const {
    page,
    page_size,
    total: searchTotal,
    list: searchGameList,
    run: runSearchCasinoGames,
    total: totalSearchGame,
    loadMore: loadMoreSearchGame,
    loading: loadingSearchGame,
} = useList(ApiMemberGameCateGames, {
    onSuccess(res, params) {

    },
    onAfter() {
        //setInputingFalse()
    },
}, { page_size: VITE_CASINO_GAME_PAGE_SIZE })


function onPage(p: number) {
    page.value = p
}
function onSearch(w: string) {
    runSearchCasinoGames({ ...paramsCate.value, page: 1 })
}
function updateSuppier(checked: string[]) {
    pids.value = checked.join(',')
    runSearchCasinoGames({ ...paramsCate.value, page: 1 })
}
onMounted(() => {
    runGameCate(params.value)
})
</script>
<template>
    <div class="py-4 px-3">
        <div class="relative  mb-6">
            <AppGameSearch :suppliers="platformOptions" @search="onSearch" @update-suppier="updateSuppier"
                v-model="searchKeyword" />
        </div>
        <BaseGameList v-if="isSearchMode" @page="onPage" :loading="loadingSearchGame" :data="searchGameList"
            :total="searchTotal" :page="page" :page-size="VITE_CASINO_GAME_PAGE_SIZE" />
        <template v-else>
            <CategoryList v-if="isCat" />
            <SuppierList v-else-if="isProvider" />
            <SuggestList v-else-if="isRec" />
        </template>
    </div>
</template>
<style scoped lang="scss"></style>